<template>
  <CloudDialog
    v-model:visible="visible"
    title="编辑 CNAME"
    :width="480"
    :mask-closable="false"
    :before-ok="handleSubmit"
    :before-open="handleOpen"
    :before-close="handleClose">
    <a-form ref="formRef" layout="vertical" :rules="rules" :model="formState">
      <!-- <a-form-item
        v-if="record?.siteName"
        label="站点"
        field="siteName"
        hide-asterisk>
        <a-input v-model="formState.siteName!" disabled></a-input>
      </a-form-item> -->
      <a-form-item label="CNAME" field="cname" hide-asterisk>
        <section class="w-full flex items-center cloud-diverse-select">
          <a-input
            v-model="formState.cname"
            placeholder="请输入"
            class="h-32px"
            :max-length="20">
            <template #prepend> site- </template>
            <template #suffix>
              <i-icons-refresh
                class="cursor-pointer hover:text-1"
                @click="handleName" />
            </template>
          </a-input>
          <span class="cname_dot">.</span>
          <a-select
            v-model="formState.resolve_domain_id"
            :options="domainOptions"
            placeholder="请选择域名"
            style="
              border-top: 1px solid var(---color-border-4, #dfe2e5);
              border-right: 1px solid var(---color-border-4, #dfe2e5);
              border-bottom: 1px solid var(---color-border-4, #dfe2e5);
              background: var(---color-fill-1, #f7f8fa);
            ">
          </a-select>
        </section>
      </a-form-item>

      <!-- <a-form-item label="域名" field="resolve_domain_id" hide-asterisk>
        <a-select
          v-model="formState.resolve_domain_id"
          :options="domainOptions"
          placeholder="请选择域名"></a-select>
      </a-form-item> -->
    </a-form>
  </CloudDialog>
</template>
<script lang="ts" setup>
import { getApiResolveDomainsApi } from '@/apis/modules/resolve/domain'
import { updateApiSiteApi } from '@/apis/modules/site/site'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'

type EditCnameParams = {
  resolve_domain_id?: string
  cname?: string
  site_id?: string
  siteName?: string
}
interface IProps {
  siteBase?: boolean
  record?: EditCnameParams
}
const visible = defineModel<boolean>({ required: true })
const emit = defineEmits(['reload'])

const props = withDefaults(defineProps<IProps>(), {
  siteBase: false
})
const domainOptions = ref<LabelValue[]>([])

const formRef = ref<FormInstance>()
const formState = reactive({
  resolve_domain_id: '',
  cname: '',
  site: '',
  siteName: ''
})
const rules: Record<string, FieldRule> = {
  resolve_domain_id: { required: true, message: '请选择域名' },
  cname: cnameRules,
  siteName: { required: true }
}
const handleOpen = async () => {
  try {
    const res = await getApiResolveDomainsApi({ limit: 0 })
    const list = res?.list ?? []

    domainOptions.value = list
      .map((item) => ({ label: item.name!, value: item.id! }))
      .filter(Boolean)
  } catch (error) {
    console.error(error)
  }

  formState.cname = props.record?.cname?.replace('site-', '') ?? ''
  formState.resolve_domain_id = props.record?.resolve_domain_id ?? ''
  if (props.siteBase) {
    formState.siteName = props.record?.siteName ?? ''
  }
}
const handleSubmit = async () => {
  const error = await formRef.value?.validate()

  if (error) return false
  const data = {
    id: props.record?.site_id ?? '',
    cname_domain: {
      cname: `site-${formState.cname}`.toLocaleLowerCase(),
      resolve_domain_id: formState.resolve_domain_id
    }
  }
  return updateApiSiteApi(data).then(() => {
    ToastUtils.success('操作成功')
    visible.value = false
    emit('reload')
  })
}

const handleName = () => {
  formState.cname = randomCname()
}
const handleClose = () => {
  formRef.value?.resetFields()
}
</script>

<style lang="less" scoped>
.arco-input-group {
  .cloud-diverse-select {
    border: 1px solid #d9d9d9;
    border-radius: 0px 4px 4px 0px;
    border-top: 1px solid var(---color-border-4, #dfe2e5);
    border-right: 1px solid var(---color-border-4, #dfe2e5);
    border-bottom: 1px solid var(---color-border-4, #dfe2e5);
    background: var(---color-fill-1, #f7f8fa);
  }
}
:deep(.arco-input-outer > :first-child) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.cloud-diverse-select {
  :deep(.arco-input-wrapper) {
    border-radius: 0 !important;
  }
  :deep(.arco-select-view) {
    padding-left: 4px;
    border-left: none;
  }
}
.cname_dot {
  border-top: 1px solid #dfe2e5;
  border-bottom: 1px solid #dfe2e5;
  //border-right: 1px solid #dfe2e5;
  height: 32px;
  width: 16px;
  background-color: #f7f8fa;
  padding-top: 0px;
  padding-left: 8px;
  line-height: 30px;
}
</style>
